<template>
  <el-card shadow="never">
    <template #header>
      <slot name="header"></slot>
    </template>
    <el-row>
      <el-col :span="24" class="mt5">
        <el-descriptions :column="2">
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="评论编码" />
            </template>
            {{ user.no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="评论人ID" />
            </template>
            {{ user.userNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="评论人昵称" />
            </template>
            {{ user.userName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="被评论人ID" />
            </template>
            {{ user.momentUserNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="被评论人昵称" />
            </template>
            {{ user.momentUserName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="评论时间" />
            </template>
            {{ formatDate(user.commentTime) }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1">
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="动态详情" />
            </template>
            <div class="mt2 rd bg-gray bg-opacity-10 p4">
              动态编码：{{ user.no }} <br />
              动态内容：{{ user.momentContent }}
              <el-row class="ml5em mt2">
                <!-- 视频 -->
                <template v-if="user.videoUrl">
                  <video :src="user.videoUrl" controls></video>
                </template>
                <template v-else-if="user.imgUrl">
                  <!-- 图片 -->
                  <el-image
                    class="h-100px w-100px rd-2.5"
                    :src="user.imgUrl"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[user.imgUrl]"
                    :initial-index="0"
                    fit="cover"
                  />
                </template>
              </el-row>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="评论内容" />
            </template>
            {{ user.content }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </el-card>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as MemberCommentApi from '@/api/blind/memberComment'
import { DICT_TYPE } from '@/utils/dict'

const { user } = defineProps<{ user: MemberCommentApi.MemberCommentVO }>()
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
